import React, { useState } from 'react';
import { Col, Form,Input,Radio,Modal,Table } from 'antd';
import { getconsumption,postconsumption,deleteconsumption } from '../../../api/user'
export const Commodity = (props) => {


     // 设置商品弹框状态  默认隐藏
  const [commoditystate, setcommoditystate] = useState(false);

   // 点击 “商品时” 显示弹出框
   const showpaly = () => {
    setcommoditystate(true);
    //  网络请求获取列表
    getconsumption().then(res => {
      console.log(res.data)
      setcommoditydata(
        commoditydata = res.data
      )
    })
  };


    // 点击 确认 商品弹框状态   隐藏弹框
  const commodityOk = () => {
    setcommoditystate(false);
  };

  // 点击 取消 商品弹框状态   隐藏弹框  
  const commodityCancel = () => {
   setcommoditystate(false);
  };

   
    // 添加 商品消费  弹框  默认隐藏
    const [addcommodity, setaddcommodity] = useState(false);
  
   // 点击 “+时” 显示弹出框
   const addcommoditymethod = () => {
    setaddcommodity(true)
   }
  
     // 点击 添加 商品 弹框状态   隐藏弹框
     const commoditymethodOk = () => {
        setaddcommodity(false);

        // 先把需要的数据 写成一个对象
      let commodityadd = {
        id:commoditydata.length+1,
        key:`${commoditydata.length+1}`,
        name:commodityvalue,
        money:`¥${moneyvalue}`,
        address: "x"
      }
       // 网络请求 添加数据  调用方法 把对象加进去数组里
       postconsumption(commodityadd).then(res => {
        console.log("addconsumptionres",res);
         setcommoditydata(
              commoditydata = [...commoditydata,commodityadd]
         )
      })

      // 清空 输入框里的内容
      setcommodityvalue(
        commodityvalue = ""
      )
      setmoneyvalue(
        moneyvalue = ""
      )
      console.log(commoditydata);
   
     };
    
      // 点击 取消 商品 弹框状态   隐藏弹框  
     const commoditymethodCancel = () => {
        setaddcommodity(false);
     };

       // 商品 表单头
    const columns = [
        {
          title: '商品名称',
          dataIndex: 'name',
        },
        {
          title: '单价',
          className: 'column-money',
          dataIndex: 'money',
          align: 'Center',
        },
        {
          title: '操作',
          dataIndex: 'address',
          align: 'Center',
          // record获取整行数据
          render: (text,record) => <a onClick={ ()=>delcommodity(record) }>{text}</a>,
        },
      ];

      
    // 点击X的时候 删除整行数据
    const delcommodity = (record) => {
             // 网络请求  点击哪个数据 过滤哪个数据
      deleteconsumption(record.id).then(res => {
        setcommoditydata(
          commoditydata = commoditydata.filter((item)=>{
          return (item.id != record.id)
        })
        )
      })
        console.log(commoditydata);
      }
    
      // 商品列表
      let [commoditydata,setcommoditydata] = useState([]);
 
    // 保存商品名称
    let [commodityvalue,setcommodityvalue] = useState("") 
    // 保存商品价格
    let [moneyvalue,setmoneyvalue] = useState("") 
  


return (
 <>


       <Col span={8}>
        <Form.Item label="商品">
           <Radio.Button  style={{ fontSize:"20px" , width:"150px"  }} onClick={showpaly}>+消费商品</Radio.Button>
        </Form.Item>
       </Col>

     {/* 商品消费商品 模态框 */}
     <Modal title="商品" open={commoditystate} onOk={commodityOk} onCancel={commodityCancel} okText="保存" cancelText="取消" >
     <Table
       //  表单头
      columns={columns}
       //  商品消费商品列表
      dataSource={commoditydata}
      bordered
      //   页脚的+号
      footer={() => <button  style={{
        width: '435px',
        height:'60px',
      }}
      onClick={addcommoditymethod}
      >+</button>}/>
     </Modal>

         {/* 商品消费商品列表添加项目 模态框 */}
       <Modal title="添加项目" open={addcommodity} onOk={commoditymethodOk} onCancel={commoditymethodCancel} okText="添加" cancelText="取消" >
  
       <span>项目名称：</span><Input placeholder="请输入项目" 
        value={commodityvalue} onChange={e => setcommodityvalue(e.target.value)}
       style={{
        width:"200px",
        marginBottom:"20px"
       }} />
  
       <br/>
  
       <span>项目单价：</span><Input placeholder="请输入单价" 
         value={moneyvalue} onChange={e => setmoneyvalue(e.target.value)}
       style={{
        width:"200px"
       }} />
       </Modal>

 </>
);
}
